<template>
    <div class="login-box">
        <div class="left-box">
            <div class="welcome-box">
                <div class="icon-box"><el-icon><SwitchFilled /></el-icon></div>
                <div class="tit-box"><span>欢迎使用</span></div>
            </div>
        </div>
        <div class="right-box">
            <div class="login-info-box">
                <div class="title-box">车站设备维修五信息管理系统</div>
                <div class="form-box">
                    <el-form :model="loginForm" label-width="auto" ref="ruleFormRef" :rules="rules">
                        <el-form-item label="用户名" prop="username" label-width="auto">
                            <el-input v-model="loginForm.username" placeholder="请输入用户名" />
                        </el-form-item>
                        <el-form-item label="密码" prop="password" label-width="auto">
                            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" show-password />
                        </el-form-item>
                        <el-button type="primary" :loading="isLoading" @click="submitForm(ruleFormRef)">登录</el-button>
                    </el-form>
                </div>
            </div>

        </div>
    </div>

</template>

<script setup>
import { reactive, ref } from 'vue'
import { loginReq } from '@/utils/api'
import { msgOpen } from '@/utils/msg'
import { useRouter } from 'vue-router'
import { mainStore } from '@/stores/store'
import { encryptPassword } from '@/utils/enctyption'
import { pdt } from '@/utils/menuTree'


let router = useRouter()
const useStore = mainStore()

//表单对象（用户名、密码）
let loginForm = reactive({
    username: '',
    password: '',
})




//表单验证ref
let ruleFormRef = ref(null)
//输入框验证规则
let rules = reactive({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
})

//登录按钮loading
let isLoading = ref(false)

//登录提交
let submitForm = () => {
    //ruleFormRef的validate方法用户表单验证，传入回调，参数valid（验证通过返还true，反之false）
    ruleFormRef.value.validate(async (valid) => {
        if (!valid) {
            return false
        } else {
            isLoading.value = true
            loginForm.password = await encryptPassword(loginForm.password) //密码加密
            let res = await loginReq(loginForm)  //登录请求
            // console.log(res)
            if (!res.status) {
                msgOpen(res.msg)
                isLoading.value = false
            } else {
                msgOpen(res.msg, "success")
                isLoading.value = false
                useStore.setUserInfo(res.datas.users[0]) //存入用户信息 
                useStore.setUserCollect(res.datas.userCollect) //存入收藏信息
                useStore.setUserSessionInfo(res.datas.sessionInfo[0]) //存入用户会话信息

                //用户目录递归
                //#region 
                /*
                let dirArr = new Array()
                const dirTree = (parent,child)=>{
                    let nextLev = new Array()
                    for(let i = 0;i < child.length;i++){
                        if(child[i].PARENT == parent.DIRID){
                            dirTree(child[i],child) //递归出子元素
                            nextLev.push(child[i])
                        }
                        if(nextLev.length > 0){
                            parent.nextLev = nextLev
                        }                        
                    }
                    return parent
                }
                const pdt = (data)=>{
                    for(let k = 0;k < data.length;k++ ){
                        if(data[k].PARENT == null){ //获取父元素
                            let o = dirTree(data[k],data)
                            dirArr.push(o)
                        }
                    }
                }    
                */
                //#endregion     

                if (res.datas.userMenu) {
                    let dirArr = ref([])
                    dirArr.value = pdt(res.datas.userMenu)
                    useStore.setMenuList(dirArr.value) //存入用户菜单信息
                    useStore.setOnlySubDirs(res.datas.userMenu) //存入用户子菜单信息
                }

                router.push("/xfjc/index")
            }
        }
    })
}

</script>

<style lang="less" scoped>
.login-box {
    height: 100vh;
    width: 100vw;
    display: flex;

    .left-box {
        height: 100%;
        width: 70%;
        background-color: var(--bgColorBlue);
        display: flex;
        justify-content: center;
        align-items: center;

        .welcome-box {
            display: flex;
            justify-content: center;
            align-items: center;
            .icon-box,.tit-box{
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .icon-box{
                font-size: 6.875rem;
                color: var(--fontColorWhite);
            }
            .tit-box{
                font-size:5.625rem;                
                color: var(--fontColorWhite);
                font-family:'黑体';
            }
        }
    }

    .right-box {
        height: 100%;
        width: 30%;
        display: flex;
        justify-content: center;
        align-items: center;

        .login-info-box {
            height: 30%;
            width: 80%;
            // border: .1875rem solid #165bf0;
            padding: .625rem;

            // border-radius: .3125rem;
            // box-shadow: rgb(20, 20, 20) -30px 30px 30px 3px;                
            .title-box {
                text-align: center;
                font-size: 1.5625rem;
                font-weight: bolder;
                margin-bottom: 1.625rem;
                color: var(--bgColorBlue);
            }

            .form-box {
                .el-button {
                    width: 100%;
                }
            }
        }
    }
}
</style>